import React from 'react'
import {withRouter} from 'react-router-dom'
import './IntelligenceItem.css'
import {Icon, WhiteSpace, WingBlank} from "antd-mobile";

const IntelligenceItemPreview = props => {

    const intelligence = props.intelligence
    const good = intelligence.info.good
    const home = good.home
    const isEmpty = home.length === 0

    const goToGameIntelligence = () => {
        const matchId = props.match.params.gameId
        props.history.push('../intelligence/' + matchId)
    }

    const gapStyle = {
        color: '#333333',
        opacity: '0.6',
        margin: '0 4px',
    }

    const title = (
        <WingBlank>
            <WhiteSpace/>
            <div
                className='flex-space-between-align-center'
            >
                <p className='game-room-analysis-title'>情报</p>
                <div className='flex-align-center'>
                    <p style={{color: '#FF4F72',}}>有利情报</p>
                    <p style={gapStyle}>|</p>
                    <p style={{color: '#36C8B9',}}>无利情报</p>
                    <p style={gapStyle}>|</p>
                    <p style={{color: '#FFA500',}}>中立情报</p>
                    <Icon type="right" />
                </div>
            </div>
            <WhiteSpace/>
        </WingBlank>
    )
    const empty = <div style={{height: '92px',}} className="flex-center-align-center">
        <p className="gray-text">赞无数据</p>
    </div>
    const main = <>
        <div style={{position: 'relative'}}>
            <div className='game-int-title-prefix' />
            <p style={{color: '#FF4F72',}}>有利情报</p>
        </div>

        <p className='game-int-item-info' style={{lineHeight: '20px',}}>情报一：<br/>{home[0] && home[0][1]}</p>
    </>

    const template = <div className='game-int-item'>
        {isEmpty ? empty : main}
    </div>
    return <div onClick={isEmpty ? () => {} : goToGameIntelligence}>
        {title}
        {template}
    </div>
}

export default withRouter(IntelligenceItemPreview)